<?php
    session_start();
?>

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/layout.css" type="text/css"/>
        <link rel="stylesheet" href="styles/computer.css" type="text/css"/>
        <script type="text/javascript" src="scripts/computer.js"></script>
        
        <script type="text/javascript">
            var xmlhttp;
            
            function changeCategory(category){
//                alert(category);

                if(window.XMLHttpRequest){
                    //code for IE7+, Firefox, Chrome, and Safari
                    xmlhttp = new XMLHttpRequest();
                }else{
                    //code for IE6 and IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange = handleReply;
                xmlhttp.open("GET", "changeCategory.php?category="+category, true);
                xmlhttp.send(); 
            }
            
            function handleReply(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("products").innerHTML=xmlhttp.responseText;
                }             
            }
        </script>
        
    </head>
    <body>

<?php        require 'header.html';

?>

<div id="container">
  <div class="wrapper">
    <div id="content">
    	<div id="order">
        <?php
        // put your code here
            echo "Welcome customer ".$_SESSION["firstName"]." ".$_SESSION["lastName"];
            
            $con = mysql_connect("localhost", "zhouzhao", "19831022");
            if(!$con){
                die("could not connect to DB: ".mysql_error());
            }
            
            mysql_select_db("cloudcom", $con);
            
            $result1 = mysql_query("select * from categories");
            
            $result2 = mysql_query("select * from products P");
            
            $result3 = mysql_query("select * from products P, sales S where P.productID=S.productID");
            
        ?>
            
            <form method="post" name="customer" action="updateCart.php">
                Category: <select name="category" onchange="changeCategory(this.value)">
                    <?php
                        echo "<option value='0'>all</option>";
                        while($row = mysql_fetch_assoc($result1)){
                            echo "<option value='".$row["categoryID"]."'>".$row["categoryName"]."</option>";
                        }
                        
                    ?>
                </select>
                <div id="products">
                <table border="1" id="productTable">
                    <tr>
                        <th>Category ID</th>
                        <th>Product name</th>
                        <th>Product description</th>
                        <th>Product image</th>
                        <th>Product price</th>
                        <th>Select</th>
                    </tr>
                    <?php
                        while($row = mysql_fetch_assoc($result2)){
                            echo "<tr>";
                            echo "<td>".$row["categoryID"]."</td>";
                            echo "<td>".$row["productName"]."</td>";
                            echo "<td>".$row["productDescription"]."</td>";
                            echo "<td><img src='images/products/".$row["productImage"]."' width='100' heigth='100' alt='image' /></td>";
                            echo "<td>".$row["productPrice"]."</td>";
                            echo "<td><input type='radio' name='productID' value='".$row["productID"]."'/></td>";
                            echo "</tr>";
                        }
                        
                        mysql_close($con);
                    ?>
                </table>
                    <table border="1" id="saleTable">
                        <tr>
                            <th>Category ID</th>
                            <th>Product name</th>
                            <th>Sale image</th>
                            <th>Discount</th>
                            <th>Start date</th>
                            <th>End date</th>
                        </tr>
                        <?php
                            while($row = mysql_fetch_assoc($result3)){
                                echo "<tr>";
                                echo "<td>".$row["categoryID"]."</td>";
                                echo "<td>".$row["productName"]."</td>";
                                echo "<td><img src='images/products/sale.jpg' width='100' heigth='100' alt='image' /></td>";
                                echo "<td>".$row["discount"]."</td>";
                                echo "<td>".$row["startDate"]."</td>";
                                echo "<td>".$row["endDate"]."</td>";
                                echo "</tr>";
                            }
                        ?>
                    </table>    
                </div>
                <select name="quantity">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5+</option>
                </select>
                <input type="submit" value="Add to Cart" class="buttonStyle" onmouseover="changeOn(this)" onmouseout="changeOff(this)"/>
            </form>
                <?php
    if(isset($_SESSION["customerID"])){
    ?>
    <form method="post" name="logout" action="logout.php">
        <input type="submit" value="Logout" class="logoutStyle" onmouseover="changeOn(this)" onmouseout="changeOff(this)"/>
    </form>
    <?php
    }
    ?>
       </div>	
    </div>
    <br class="clear" />
  </div>
</div>
        
        <?php
                        require 'tail.html';
        ?>
        
    </body>
</html>
